<template>
    <Head>
        <Title>Home</Title>
    </Head>
    <section class="banner padding-bottom banner--style3 bg--cover" :style="`background-image:url(${$config.public.baseUrl}images/bg/home3/1.png)`">
        <div class="container">
            <BannerContent />
        </div>
        <BannerIcon />
    </section>

    <section class="partner partner--style2">
        <div class="container" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
            <Partners :partnerThree="partnerThree" />
        </div>
    </section>

    <section class="categories categories--style3 padding-top  padding-bottom">
        <div class="container" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
            <Categories :categoryListThree="categoryListThree" />
        </div>
    </section>

    <section class="about about--style3 padding-bottom">
        <div class="container">
            <AboutUs />
        </div>
    </section>

    <section class="course course--style3 padding-top padding-bottom brand3-bg-1">
        <div class="container" data-aos="fade-up" data-aos-duration="1000" :data-aos-offset="screenHeight/5.3" data-aos-delay="100">
            <PopularCourse :courses="courses" />
        </div>
    </section>

    <div class="counter counter--style2  brand-3">
        <div class="container">
            <CounterThree />
        </div>
    </div>

    <section class="team team--style2 padding-top padding-bottom">
        <div class="container" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
            <Team :mentors="mentors" />
        </div>
    </section>

    <section class="testimonial testimonial--style3 padding-top padding-bottom brand3-bg-1">
        <div class="container" data-aos="fade-up" data-aos-duration="800">
            <Testimonial :testimonials="testimonials" />
        </div>
    </section>

    <section class="blog blog--style3 padding-top padding-bottom">
        <div class="container-fluid px-sm-0" data-aos="fade-up" data-aos-duration="800">
            <Blog :posts="posts" />
        </div>
    </section>
</template>

<script>
import BannerContent from '@/components/modules/index3/BannerContent.vue'
import BannerIcon from '@/components/modules/index3/BannerIcon.vue'
import Partners from '@/components/modules/index3/Partners.vue'
import Categories from '@/components/modules/index3/Categories.vue'
import AboutUs from '@/components/modules/index3/AboutUs.vue'
import PopularCourse from '@/components/modules/index3/PopularCourse.vue'
import CounterThree from '@/components/modules/index3/CounterThree.vue'
import Team from '@/components/modules/index3/Team.vue'
import Testimonial from '@/components/modules/index3/Testimonials.vue'
import Blog from '@/components/modules/index3/Blog.vue'

definePageMeta({
    layout: "index3",
});

export default {
    components: { BannerContent, BannerIcon, Partners, Categories, AboutUs, PopularCourse, CounterThree, Team, Testimonial, Blog },
    async setup() {
        const { axios } = fetchData();

        const homeTestimonialsResponse = await axios.get('/index3/home_testimonials.json')
        const testimonials = homeTestimonialsResponse.data

        const generals = await axios.get('/general.json')
        const categoryListThree = generals.data.categoryListThree

        const coursesResponse = await axios.get('/courses.json')
        const courses = coursesResponse.data

        const teamsResponse = await axios.get('/index3/teams.json')
        const mentors = teamsResponse.data

        
        const mentor = await axios.get('/mentor.json')
        const partnerThree = mentor.data.partnerThree

        const blog = await axios.get('/blog.json')
        const posts = blog.data.posts
        return {
            categoryListThree,
            courses,
            mentors,
            testimonials,
            posts,
            partnerThree
        };
    },
    computed: {
        screenHeight() {
            return screen.height;
        }
    }
}
</script>

<style></style>